<template>
	<view class="app">
		<view class="withdraw-top box-card" style="width: 690rpx;height: 238rpx;background: linear-gradient( 88deg, #3DC997 0%, #39C66F 100%);border-radius: 24rpx 24rpx 24rpx 24rpx;">
			<view style="width: 400rpx;flex-direction: column;display: flex;">
				<text style="color: #ffffff;font-size: 24rpx;">账户余额（元）</text>
				<text style="color: #ffffff;font-weight: 400;font-size: 64rpx;">{{adminMoney}}</text>
			</view>
			<view style="border-radius: 40rpx;border: 1rpx solid #ffffff;padding: 10rpx 20rpx;" >
				<text style="color: #ffffff;padding-right: 10rpx;" @click="gotoPage('/pageA/sitemaster/rechargelist')">充值记录</text>
				<u-icon name="arrow-right" color="#ffffff"></u-icon>
			</view>
		</view>
		<view class="withdraw-middle box-card" style="margin:-28px 0 0 0;margin:-52rpx 0 0 0;border-radius:30rpx;background: #FFFFFF;box-shadow: 0rpx -4rpx 13rpx 0rpx rgba(25,93,54,0.16);">
			<u-section :title="'充值金额'" :right="false" line-color="#19be6b"></u-section> 
			<view class="withdraw-input-container">
				<u-icon name="rmb" size="40" color="#000000"></u-icon> 
				<u-input class="withdraw-input" maxlength="6"  v-model="money" type="number" :border="false" placeholder="手动输入充值金额" @change="changemoney" />
			</view>
			<view style="width: 100%; display: flex;flex-wrap: wrap;">
				<text v-for="( item, index ) in chongzhiList" :key="index":class="{ysjeOn:item.selected,ysje:true}" @click="setmoney(index)">{{item.money}} <text style="font-size: 32rpx;">元</text></text>
			</view>
		</view>
		<view style="text-align:center;height:80rpx;font-size:26rpx;color:#666666;line-height:80rpx;">
			点击确定，即表示已阅读并同意<text style="color: #39C66F;">充值协议</text>
		</view>
		<view @click="withdraw" style="background:linear-gradient( 88deg, #3DC997 0%, #39C66F 100%);border-radius:27px;text-align:center;height:80rpx;font-size:36rpx;color:#ffffff;line-height:80rpx;margin:20rpx;">
			立即充值
		</view>
	</view>
</template>
<style scoped> 
	.withdraw-top{margin-top:20rpx;display: flex;align-items: baseline;}
	.withdraw-top-type{ margin-left: 20rpx;display: flex;flex-direction: column;}
	.withdraw-top-type text:nth-child(1){font-weight: bold;font-size: 36rpx;margin-bottom: 6rpx;color:#333;}
	.withdraw-middle{display: flex;flex-direction: column;}
	.withdraw-input-container{margin-bottom: 20rpx;margin-top:20rpx;padding-bottom:10rpx;border-bottom: 1px solid #eee;display: flex;align-items: center;}
	.withdraw-input{margin-left: 20rpx;}
	// #ifndef H5
	/deep/ .withdraw-input .u-input__input{font-size: 50rpx !important; } 
	// #endif
	// #ifdef H5
	/deep/ .withdraw-input .uni-input-input{font-size: 60rpx !important;font-weight: bold;}
	/deep/ .withdraw-input .uni-input-placeholder{top:14rpx !important;font-size: 50rpx !important;height:60rpx !important;overflow: visible !important;}
	// #endif
	.withdraw-balance{font-size: 24rpx;margin-top: 10rpx;}
	.withdraw-balance text{color:red;margin:0 10rpx;font-size: 26rpx;}
	.withdraw-balance text:nth-child(2){font-size: 24rpx;}
	.withdraw-bottom-row {padding: 20rpx;}
	.ysje{width: 30%;margin: 20rpx 1%;font-weight: 400;font-size: 44rpx;text-align: center;line-height: 104rpx;height: 104rpx;border-radius: 20rpx 20rpx 20rpx 20rpx;border: 1rpx solid #B5BFBB;color: #00000;}
	.ysjeOn{background: linear-gradient( 213deg, #36BE6A 0%, #3CC885 100%);color: #FFFFFF;}
	
</style>
<script> 
	export default {
		data() {
			return {
				money:'',
				adminMoney:0,
				chongzhiList:[
					{
						money: 100,
						selected: false
					},
					{
						money: 200,
						selected: false
					},
					{
						money: 300,
						selected: false
					},
					{
						money: 400,
						selected: false
					},
					{
						money: 500,
						selected: false
					},
					{
						money: 600,
						selected: false
					}
				]
			}
		},
		methods:{ 
			gotoPage(path){
				uni.navigateTo({ url: path });
			},
			getUserInfo(){
				uni.$emit("updateUserInfo")
			},
			setmoney(index)
			{
				this.money = this.chongzhiList[index]?.money || 0
				for(let i in this.chongzhiList)
				{
					this.chongzhiList[i].selected = i == index
				}
			},
			changemoney(){
				for(let i in this.chongzhiList)
				{
					this.chongzhiList[i].selected = false
				}
			},
			withdraw(){
				var _this = this
				_this.$u.api.site.getWechatQrcodeInfo({
					rechargeMoney:_this.money
				}).then(res => {
					if(res.status==200)
					{
						uni.getProvider({
							service: 'oauth',
							success: function (pro) {
								uni.requestPayment({
								    provider: pro.provider[0],
									timeStamp: res.data.timeStamp.toString(),
									nonceStr: res.data.nonceStr,
									package: res.data.package,
									signType: res.data.signType,
									paySign: res.data.paySign,
									success: function (res) {
										console.log('success:' + JSON.stringify(res));
										_this.$u.toast('充值成功')
										setTimeout(function(){
											uni.navigateBack();
										},1000)
									},
									fail: function (err) {
										console.log('fail:' + JSON.stringify(err));
										_this.$u.toast('充值失败')
									}
								});
							}
						});
					}
					
					/* this.$u.toast(res.msg)
					if(res.status != 200){ 
						return false
					}
					uni.$emit('updateUserInfo') 
					setTimeout(function(){
						uni.navigateBack();
					},1000) */
					
				})
			}
		},
		onLoad(option) {
			this.adminMoney = option.adminMoney
		},
		onShow() {
			this.getUserInfo()
		}
	}
</script>